<template>
  <div class="container">
    <common-header :title="cnCategory"></common-header>
    <no-data :category="noDataIndex" :message="noDataMessage" v-show="!isData"></no-data>
    <div class="file_list" v-show="isData" ref="fileList">
      <ul>
        <li v-for="item in mountData">
          <div class="con">
            <div class="file_img" :style="{background: item.imgUrl, backgroundSize: '100% 100%'}"></div>
            <div class="right_dec">
              <router-link v-bind="{to:'/docs_list/'+ category + '/preview?title=' + item.title}">
                <h3 class="file_title">{{item.title}}</h3>
                <div class="clearfix file_desc">
                  <p class="file_time fl file_p">{{item.time}}</p>
                  <p class="file_size fr file_p">{{item.size}}</p>
                </div>
              </router-link>
            </div>
            <div class="pulldown" @click.stop.prevent="pulldown($event)"></div>
            <div class="file_sel clearfix">
              <div class="file_download fl font_s">
                <b></b>
                下载
              </div>
              <div class="file_del fr font_s">
                <b></b>
                删除
              </div>
            </div>
          </div>
        </li>
        <li class="no_more_data" ref="noMore">
          <p>加载完毕，没有更多了~</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  //  import $ from 'jquery'

  // 引入头部公共组件
  import Header from '../subComponents/header.vue'

  // 引入no-data组件
  import noData from '../subComponents/nodata.vue'

  // 引入公共方法
  import { pullDown, lazyLoad, nomoreData, handleDocType } from '../../common'

  // 引入图片路径
  import docUrl from '../../assets/images/docslist/doc.png'
  import musicListUrl from '../../assets/images/docslist/music_list.png'
  import pdfUrl from '../../assets/images/docslist/pdf.png'
  import pptxUrl from '../../assets/images/docslist/pptx.png'
  import rarUrl from '../../assets/images/docslist/rar.png'
  import txtUrl from '../../assets/images/docslist/txt.png'
  import xlsxUrl from '../../assets/images/docslist/xlsx.png'
  import zipUrl from '../../assets/images/docslist/zip.png'
  import videoUrl from '../../assets/images/docslist/video.png'
  import unknowUrl from '../../assets/images/docslist/unknow.png'

  export default {
    data () {
      return {
        category: this.$route.params.category,  // 存储路由
        cnCategory: '', // 存储中文路由
        categoryList: [ // 用来路由转换的过渡数组
          {picture: '图片', noDataMessage: '暂无图片', index: 1},
          {doc: '文档', noDataMessage: '暂无文档', index: 3},
          {music: '音乐', noDataMessage: '暂无音乐', index: 4},
          {rests: '其他', noDataMessage: '暂无其他', index: 5},
          {share: '分享', noDataMessage: '暂无分享', index: 0}
        ],
        isPull: false,
        eTarget: {}, // 记录每次下滑的事件源
        isData: true, // 是否有数据
        falseData: [], // 假数据
        mountData: [], // 真正渲染的数据
        imgUrl: {
          doc: `url(${docUrl}) no-repeat`,
          musicListUrl: `url(${musicListUrl}) no-repeat`,
          pdf: `url(${pdfUrl}) no-repeat`,
          pptx: `url(${pptxUrl}) no-repeat`,
          rar: `url(${rarUrl}) no-repeat`,
          txt: `url(${txtUrl}) no-repeat`,
          xlsx: `url(${xlsxUrl}) no-repeat`,
          zip: `url(${zipUrl}) no-repeat`,
          videoUrl: `url(${videoUrl}) no-repeat`,
          unknowUrl: `url(${unknowUrl}) no-repeat`
        },
        noDataMessage: '暂无图片', // 如果没有数据渲染在页面上的文字
        noDataIndex: 0, // 判断是哪个文件夹 每个文件夹对应不同的index 在子组件里面进行辨别 渲染不同的图片
        noMoreData: false
      }
    },
    components: {
      'common-header': Header,
      'no-data': noData
    },
    created () {
      this.handleQuerys()
      this.handleFalseData()
      lazyLoad(this.falseData, this.mountData, this)
    },
    mounted () {
      nomoreData(this)
    },
    methods: {
      /*
        1. 通过路由参数得到对应的文件夹中文名称用于在页面上显示
        2. 根据不同的文件夹名称向子组件传递不同的参数 （在没有数据的时候使用）
      */
      handleQuerys () {
        var len = this.categoryList.length
        var i
        for (i = 0; i < len; i++) {
          if (this.categoryList[i][this.category]) {
            this.cnCategory = this.categoryList[i][this.category]
            this.noDataMessage = this.categoryList[i].noDataMessage
            this.noDataIndex = this.categoryList[i].index
            return false
          }
        }
      },

      handleFalseData () {
        switch (this.category) {
          case 'picture':
            this.falseData = [
              {title: '夏洛克', time: '2017-10-30 15:00', size: '1.6M', imgUrl: this.imgUrl.videoUrl},
              {title: '夏洛克', time: '2017-10-30 15:00', size: '1.6M', imgUrl: this.imgUrl.videoUrl}
            ]
            break
          case 'music':
            this.falseData = [
              {title: '等你下课.mp3', time: '2017-10-30 15:00', size: '1.6M', imgUrl: this.imgUrl.musicListUrl},
              {title: '等你上课.mp3', time: '2017-10-30 15:00', size: '1.6M', imgUrl: this.imgUrl.musicListUrl}
            ]
            break
          case 'doc':
            this.falseData = [
              {title: 'mole.doc', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.rar', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pdf', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.txt', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.zip', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.xlsx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pptx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.ppt1x', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.doc', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.rar', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pdf', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.txt', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.zip', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.xlsx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pptx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.ppt1x', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.doc', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.rar', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pdf', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.txt', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.zip', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.xlsx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pptx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.ppt1x', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.doc', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.rar', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pdf', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.txt', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.zip', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.xlsx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pptx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.ppt1x', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1}
            ]
            this.handleDocType()
            break
          case 'rests':
            this.falseData = [
              {title: 'mole.doc', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.rar', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pdf', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.txt', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.zip', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.xlsx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pptx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1}
            ]
            this.handleDocType()
            break
          default:
            this.falseData = [
              {title: 'mole.doc', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.rar', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pdf', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.txt', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.zip', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.x.xlsx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1},
              {title: 'mole.pptx', time: '2017-10-30 15:00', size: '1.6M', imgUrl: 1}
            ]
            this.handleDocType()
        }
      },

      // 根据返回数据文件的后缀名给出对应的图片路径
      handleDocType () {
        handleDocType(this)
      },

      pulldown (e) {
        pullDown(e, this)
      }
    }
  }
</script>
<style scoped>
  .container {
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
  }

  /* 文件列表 */

  .file_list ul {
    width: 100%;
  }

  .file_list ul li {
    height: 1.8rem;
    overflow: hidden;
    padding: 0 0.28rem;
  }

  .file_list ul .no_more_data {
    height: 0;
    background-color: #f4f4f4;
  }

  .file_list ul .no_more_data p {
    line-height: 1.8rem;
  }

  .file_list ul li .file_sel {
    position: absolute;
    left: -0.28rem;
    top: 1.8rem;
    width: 7.5rem;
    height: 1.8rem;
    background-color: #fff;
    padding: 0 2.7rem;
  }

  .file_list ul li .con {
    width: 100%;
    height: 100%;
    border-bottom: 0.01rem solid #eee;
    position: relative;
    padding: 0.3rem 0;
  }

  .file_list ul li .file_sel .font_s {
    font-size: 0.2rem;
    color: #666;
    line-height: 0.4rem;
  }

  .file_list ul li .file_sel .file_del b {
    display: block;
    width: 0.36rem;
    height: 0.39rem;
    margin: 0.6rem auto 0;
    background: url('../../assets/images/sprite.png') no-repeat -1.77rem -1.54rem;
    background-size: 10rem 6rem;
  }

  .file_list ul li .file_sel .file_download b {
    width: 0.46rem;
    height: 0.39rem;
    margin: 0.6rem 0 0 0;
    background: url('../../assets/images/sprite.png') no-repeat -2.43rem -1.51rem;
    background-size: 10rem 6rem;
    display: block;
  }

  .file_list ul li .file_img {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 0.3rem;
    left: 0;
    z-index: 999;
  }

  .file_list ul li .right_dec {
    width: 100%;
    height: 1.2rem;
    padding: 0.2rem 0.64rem 0 1.52rem;
  }

  .file_list ul li .right_dec .file_desc {
    padding: 0.1rem 0.3rem 0 0;
  }

  .file_list ul li .right_dec .file_title {
    font-size: 0.32rem;
    color: #333;
    line-height: 0.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .file_list ul li .right_dec .file_p {
    font-size: 0.28rem;
    color: #ccc;
    line-height: 0.3rem;
  }
</style>
